<template>
  <header class="app-header">
    <div class="logo">vue3 web</div>
    <div class="user-info">
      <span>{{ username }}</span>
      <t-button  variant="text" @click="handleLogout">退出登录</t-button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const username = 'admin' // 实际项目中可以从状态管理中获取

// 退出登录事件 - 触发路由跳转
const handleLogout = () => {
  // 这里可以添加清除用户信息等逻辑
  router.push('/login')
}
</script>

<style scoped lang="less">
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #e5e6eb;
  
  .logo {
    font-size: 18px;
    font-weight: bold;
    color: #165DFF;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 16px;
  }
}
</style>
    